<template>
  <view class="bind-container">
    <!-- 导航栏 -->
    <uni-nav-bar fixed left-icon="closeempty" rightIcon="more-filled" title="订购手机号" @clickLeft="back"></uni-nav-bar>

    <!-- tips -->
    <view class="tips-box">
      为了保护您的账户安全，我们将对您订购的手机号进行验证
    </view>

    <!-- 表单 -->
    <view class="form-box">
      <u-form :model="form" :rules="rules" ref="uForm" :error-type="['toast']">
        <u-form-item left-icon="phone" prop="mobile">
          <u-input v-model="form.mobile" placeholder="请输入手机号" type="tel" maxlength="11"></u-input>
        </u-form-item>
        <u-form-item left-icon="lock" prop="code">
          <u-input v-model="form.code" placeholder="请输入验证码" :clearable="false" type="tel" maxlength="6" />
          <u-count-down v-if="isShowCounDown" slot="right" :timestamp="60" :show-hours="false" :show-minutes="false"
            @end="isShowCounDown = false" font-size="32" color="#999" separator="colon"></u-count-down>
          <u-button v-else slot="right" ripple size="mini" shape="circle" class="send-sms-btn" @click="onSendSms">发送验证码
          </u-button>
        </u-form-item>
        <u-form-item class="confirm-btn">
          <u-button type="warning" ripple shape="circle" @click="submit">确定</u-button>
        </u-form-item>
      </u-form>
    </view>
  </view>
</template>

<script>
  import { sendCode, sendOrder } from '../../api/index.js'
  
  export default {
    name: 'BindMobile',
    data() {
      return {
        form: {
          mobile: '',
          code: ''
        },
        inputOrder: {
          oid: '',
          pid: '',
          msgCode: '',
          bindMobile: ''
        },
        rules: {
          mobile: [{
              required: true,
              message: '请输入手机号',
              // 可以单个或者同时写两个触发验证方式 
              trigger: ['change', 'blur'],
            }, // 正则判断为字母或数字
            {
              pattern: /^1[3|5|7|8|9]\d{9}$/,
              message: '请输入正确的手机号码',
              trigger: ['change', 'blur']
            },
            {
              pattern: /^[1]((33)|(49)|(53)|(70)|(73)|(77)|(80)|(81)|(89)|(99)|(91))[0-9]{8}$/,
              // 正则检验前先将值转为字符串
              transform(value) {
                return String(value);
              },
              message: '请输入电信手机号码'
            }
          ],
          code: [{
              required: true,
              message: '请输入验证码',
              trigger: ['change', 'blur'],
            },
            {
              min: 4,
              max: 6,
              message: '请输入6位验证码'
            }
          ]
        },
        isShowCounDown: false
      };
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      },
      async onSendSms() {
        if (!this.form.mobile) {
          return this.$u.toast('手机号不能为空')
        }
        if (this.form.mobile.length !== 11) {
          return this.$u.toast('手机号格式有误')
        }
        
        const reg = /^[1]((33)|(49)|(53)|(70)|(73)|(77)|(80)|(81)|(89)|(99)|(91))[0-9]{8}$/
        if (!reg.test(this.form.mobile)) {
          return this.$u.toast('请输入电信手机号')
        }
        
        try {
          const inputParams = {
            mobile: this.form.mobile,
            pid: '98',
            transParam: 'web'
          }
          const res = await sendCode(inputParams)
          this.$u.toast('验证码发送成功')
          if (res.data.result === 'true') {
            // 1、oid: 订单id
            this.inputOrder.oid = res.data.data.id
          } else {
            this.$u.toast(res.data.message)
          }
          setTimeout(function() {
            uni.hideLoading();
          }, 1000);
          this.isShowCounDown = true
        } catch (e) {
          uni.showToast({
            title: '验证码发送失败',
            icon: 'none'
          })
        }
      },
      async submit() {
        try {
          if (!this.form.mobile || !this.form.code) {
            return this.$u.toast('手机号或验证码不能为空')
          }
          const res = await this.$refs.uForm.validate()
          // false -> 验证不通过
          // ture -> 验证通过
          // 2、pid 产品id
          this.inputOrder.pid = 98
          // 3、短信验证码
          this.inputOrder.msgCode = this.form.code
          // 4、绑定的手机号
          this.inputOrder.bindMobile = uni.getStorageSync('hwyx-mobile')
          const res1 = await sendOrder(this.inputOrder)
          if (res1.data.result === 'true') {
            this.$u.toast('订购成功')
            this.$u.route({
              url: 'pages/success/success'
            })
          } else {
            this.$u.toast(res1.data.message)
          }
        } catch (e) {
          this.$u.toast('订购失败')
        }
      }
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    }
  }
</script>

<style lang="scss">
  .bind-container {
    background-image: url('~@/static/bind-bg.png');
    background-size: cover;
    height: 100vh;

    .tips-box {
      font-size: 26rpx;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #666666;
      padding: 40rpx 110rpx;
    }

    /deep/.form-box {
      padding: 30rpx;

      .send-sms-btn {
        background: #336CFA;
        font-size: 26rpx;
        color: #fff;
      }

      .u-icon {
        font-size: 32rpx;
        color: #999;
      }

      .confirm-btn {
        border: none;
        margin-top: 50rpx;

        .u-btn {
          width: 600rpx;
          height: 80rpx;
          background: #336CFA;
        }
      }
      .u-hairline-border:after {
        border: none;
      }

      .u-border-bottom:after {
        border: none;
      }
    }



    /deep/.u-form {
      .u-form-item {
        .u-form-item__message {
          padding-left: 10rpx;
        }
      }
    }
  }
</style>
